<script setup>
import { Plus } from "@element-plus/icons-vue";
import useTable from "@/utils/useTable";
import {http} from "@/api";
import router from "@/router";
import {ref} from "vue";
import {ElMessage} from "element-plus";

/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openAdd,
  openEdit,
  openDelete,
} = useTable({
  requestFn: http.Staff,
  routerPre: 'staffList',
  params: {
    nickname: '',
    phone: ''
  }
})
const openEditOrder = (row) => {
  router.push({
    path: '/ProductOrder?staff_id' + row.id,
  })
}
const openUpdate1 = (row) => {
  http.Staff.update({
    id: row.id,
    audit_status: 2
  }).then(() => {
    search()
  })
}
const openUpdate2 = (row) => {
  http.Staff.update({
    id: row.id,
    audit_status: 3
  }).then(() => {
    search()
  })
}
const dialogValue = ref(false)
const currentRow = ref({})
const rules = ref({
  settlement_ratio: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
})
const openDialog = (row) => {
  currentRow.value = {
    ...row
  }
  dialogValue.value = true
}
const formRef = ref(null)
const confirmDialog = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (currentRow.value.settlement_ratio < 0 || currentRow.value.settlement_ratio > 100) {
        ElMessage.error('请输入0-100之间的数字')
        return
      }
      http.Staff.update({
        id: currentRow.value.id,
        settlement_ratio: currentRow.value.settlement_ratio
      }).then(() => {
        dialogValue.value = false
        search()
      })
    }
  })
}

const openDownload = (row) => {
  window.open(row.pdf_url, '_blank')
}
</script>


<template>
  <el-dialog v-model="dialogValue" title="设置结算比例" width="500px">
    <el-form ref="formRef" :model="currentRow" :rules="rules">
      <el-form-item label="结算比例" prop="settlement_ratio">
        <el-input v-model="currentRow.settlement_ratio" type="number" :min="0" :max="100">
          <template #suffix>
            %
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogValue = false">取消</el-button>
        <el-button type="primary" @click="confirmDialog">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <PageMain title="阿姨管理">
    <el-form label-suffix="：" inline>
      <el-form-item label="手机号">
        <el-input v-model="searchParams.phone" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="searchParams.nickname" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="add-box">
      <el-button type="primary" :icon="Plus" @click="openAdd">添加</el-button>
    </div>
    <div class="table-box">
      <el-table :data="dataSource">
        <el-table-column label="在线状态" >
          <template #default="scope">
            <el-tag :type="scope.row.is_online === 1 ? 'success' : 'error'">{{ scope.row.is_online === 1 ? '在线' : '离线' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="nickname"/>
        <el-table-column label="年龄" prop="age"/>
        <el-table-column label="手机" prop="phone" width="120"/>
        <el-table-column label="头像">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <ViewImage type="image" :image-url="scope.row.avatar"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="description" show-overflow-tooltip width="200px"/>
        <el-table-column label="城市" prop="city.name" />
        <el-table-column label="当前位置" prop="address" width="120" show-overflow-tooltip/>
        <el-table-column label="经度" prop="longitude" />
        <el-table-column label="纬度" prop="latitude" />
        <el-table-column label="账户余额" prop="balance" />
        <el-table-column label="结算比例" prop="settlement_ratio">
          <template #default="scope">
            {{ scope.row.settlement_ratio }}%
          </template>
        </el-table-column>
        <el-table-column label="审核状态" >
          <template #default="scope">
            <el-tag :type="scope.row.audit_status === 1 ? 'primary' :  scope.row.audit_status === 2 ? 'success' : 'error'">{{ scope.row.audit_status === 1 ? '待审核' :  scope.row.audit_status === 2 ? '审核通过' : '审核驳回' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" >
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'error'">{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200px">
          <template #default="scope">
            <el-button type="text" @click="openUpdate1(scope.row)" v-if="scope.row.audit_status === 1">通过</el-button>
            <el-button type="text" @click="openUpdate2(scope.row)" v-if="scope.row.audit_status === 1" style="color: red">拒绝</el-button>
            <el-button type="text" @click="openDialog(scope.row)">设置结算比例</el-button>
            <el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
            <el-button type="text" v-if="scope.row.pdf_url" @click="openDownload(scope.row)">下载合同</el-button>
            <el-button type="text" style="color: red" @click="openDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100, 200]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changeSize"
          @current-change="changePage"
      />
    </div>
  </PageMain>
</template>

<style scoped lang="scss">

</style>
